<template>
	<view>
		<view class="content">
			<view class="btn">圆盘抽奖(针转)</view>
			<view class="btn">圆盘抽奖(盘转)</view>
			<view class="btn">跑马灯抽奖</view>
			<view class="btn">挂挂乐</view>
		</view>
		<view class="container">
			<view class="body flex-cen-col">
				<view class="prizeBox">
					<view class="prize_box">
						<view class="ul">
							<!-- class="li {{curIndex == index ? 'cur' : ''}}"  style='transform:rotate({{item.deg}}deg)'  
							 :style="{transform:`rotate(${item?.deg}deg)`}"-->  
							<view class="li" v-for="(item) in needleObj.prize" :key="item.id" :style="{transform:`rotate(${item?.deg}deg)`}">
								<text :style="{transform:`rotate(${needleObj.curNumDeg * .5}deg)`}">{{item.name}}</text>
								<!-- <text style='transform:rotate({{needleObj.curNumDeg * .5}}deg)'>{{item.name}}</text> -->
							</view>
						</view>
						<view class="needle" style='transform:rotate({{needleObj.needleDeg}}deg)'></view>
						<view class="start {{needleObj.isPrize ? '' : 'on'}}]" bindtap="start"><text
								wx:if="{{needleObj.isPrize}}">开始</text><text wx:if="{{!needleObj.isPrize}}">好运来...</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		ref,
		reactive,
		computed,
		inject
	} from 'vue'
	import data from './data.js'

	const tools = inject("$tools")
	const title = ref('顶部')
	const needleObj = reactive({
		prize: data.prize,
		prize_cur: data.prize_cur,
		curNumDeg: 0,
		needleDeg: -90,
		isPrize: true,
		time: 5000
	})

	onLoad(() => {
		init()
		console.log('data', needleObj.prize);
	})

	const init = () => {
		let newDeg = 360 / needleObj.prize.length
		needleObj.prize.map((el,i)=>{
			el.deg = newDeg * i
		})
		needleObj.curNumDeg = newDeg
	}
</script>

<style lang="scss" scoped>
	.content {
		border: 1px solid red;
		height: 20vh;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;

		.btn {
			border-radius: 50rpx;
			margin: 20rpx 0;
			width: 40%;
			padding: 20rpx 0;
			text-align: center;
			box-shadow: 0 0 10rpx 0 #999;
		}
	}

	.container {
		height: 70vh;
		margin-top: 40rpx;
		border-left: 4px solid blue;
	}



	// 针转
	.prize_box {
		width: 600rpx;
		height: 600rpx;
		margin: 0 auto;
		border-radius: 50%;
		border: 8rpx solid #274C28;
		position: relative;
	}

	.prize_box .ul {
		width: 616rpx;
		height: 616rpx;
	}

	.prize_box .ul .li {
		width: 300rpx;
		border-top: 1rpx solid #666;
		position: absolute;
		left: 50%;
		top: 50%;
		transform-origin: left top;
		text-align: center;
	}

	.prize_box .ul .li text {
		display: block;
		margin-top: 36rpx;
	}

	.prize_box .needle {
		width: 220rpx;
		height: 10rpx;
		background: #00B26A;
		position: absolute;
		left: 50%;
		top: calc(50% - 5rpx);
		transform-origin: left center;
		transform: rotate(-90deg);
		transition: all 5s ease-in-out;
	}

	.prize_box .needle::after {
		content: "";
		display: block;
		width: 0;
		height: 0;
		border: 20rpx solid transparent;
		border-top-color: #00B26A;
		position: absolute;
		left: 100%;
		top: calc(50% - 20rpx);
		transform: rotate(-90deg);
	}

	.prize_box .needle::before {
		content: "";
		display: block;
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
		background: #00B26A;
		position: absolute;
		left: -10rpx;
		top: calc(50% - 10rpx);
	}

	.start {
		width: 200rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background: #00B26A;
		color: #fff;
		border-radius: 10rpx;
		margin: 50rpx auto 0;
	}

	.start.on {
		background: #B92722;
		border-color: #B92722;
	}
</style>